<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- import CSS -->
	  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	  <style>
      body{
          font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      }

      .el-carousel__item h3 {
          color: #475669;
          font-size: 14px;
          opacity: 0.75;
          line-height: 200px;
          margin: 0;
      }

      .el-carousel__item:nth-child(2n) {
          background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n+1) {
          background-color: #d3dce6;
      }

	  .post-summary.text-ells {
		  max-height: 100px;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 3;
		  -webkit-box-orient: vertical;
	  }

	  .el-select .el-input {
		  width: 130px;
	  }
	  .input-with-select .el-input-group__prepend, .el-input-group__append{
		  background-color: #fff;
	  }
    </style>

  </head>
  <body>
    <div id="app">

      <el-container>
	<el-header title="顶栏">
	  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
		   style="padding:0em 18em">

		  <el-menu-item index="0">
			  <el-link href="/blogo/blog/page" :underline="false">
				  <img src="/static/images/logo.png" alt="" width="100px" style="float: left;">
				  <span><h1 style="float: left; margin:0px;">Blogo</h1></span></el-link>
		  </el-menu-item>


	    <el-menu-item index="1"><el-link>时间轴</el-link></el-menu-item>
	    <el-menu-item index="2"><el-link>档案</el-link></el-menu-item>
	    <el-menu-item index="3"><el-link>友链</el-link></el-menu-item>
	    <el-menu-item index="4"><el-link>关于</el-link></el-menu-item>
	  </el-menu>
	  <div class="line"></div>
	</el-header>
	<div title="公告" style="margin-top: 20px;">
	  <template>
	    <el-carousel :interval="4000" type="card" height = "350px">
	      <el-carousel-item v-for="item in lists" :key="item.name">
		<el-image
		  :src="item.imgUrl"
		  :fit="fit">
		</el-image>
		<h3 class="medium">${item.name}</h3>


	      </el-carousel-item>
	    </el-carousel>
	  </template>
	</div>
	<el-row :gutter="20">
		<el-col :span="12" :offset="6">
			<div style="margin-top: 15px; " title="按关键字查询博客">
				<el-input x-placement="请输入内容" v-model="input" class="input-with-select" @change="handleInputChange" clearable>
					<el-select v-model="select" slot="prepend" placehodler="请选择">
						<el-option label="标题" value="1"></el-option>
						<el-option label="类别" value="2"></el-option>
						<el-option label="标签" value="3"></el-option>
					</el-select>
				</el-input>
			</div>
		</el-col>
	</el-row>

	<el-container style="margin-top: 1em;">
	  <el-aside :span="12" title="侧导航栏">

	    <el-row class="tac">
	      <el-col>

		<el-menu
		  default-active="2"
		  class="el-menu-vertical-demo"
		  @open="handleOpen"
		  @close="handleClose">
		  <el-menu-item index="1">
		    <template slot="title">
		      <i class="el-icon-apple" style="color: #F56C6C;"></i>
		      <span>精品博客</span>
		    </template>
		  </el-menu-item>
		  <el-menu-item index="2">
		    <template slot="title">
		      <i class="el-icon-collection-tag" style="color:#67C23A"></i>
		      <span>最近博客</span>
		    </template>
		  </el-menu-item>
		  <el-submenu index="3">
		    <template slot="title">
		      <i class="el-icon-files"></i>
		      <span>分类</span>
		    </template>
		    <el-menu-item-group v-for="item in categoryList" :key="item">
		      <el-menu-item index="1-1" @click="handleCategoryClick(item.category_name)">${item.category_name}</el-menu-item>
		    </el-menu-item-group>

		  </el-submenu>
		</el-menu>
	      </el-col>
	    </el-row>
	  </el-aside>
	<el-container>

	  <el-main title="博客列表">

	<el-row>
	  <el-col :span="24">
		<template>
		  <el-skeleton :rows="4" :loading="loading" animated>
		<template slot="template">
		  <div style="padding:14px;">
			<el-skeleton-item variant="h1" style="width:50%" />
			<el-skeleton-item variant="text" style="margin-right:16px;"/>
			<el-skeleton-item variant="text" style="width: 30%;"/>
		  </div>
		</template>
		<template>
		  <el-card
			:body-style="{ padding: '0px', marginBottom: '1px' }"
			v-for="item in blogs"
			:key="item.blog_id"
			style="margin: 10px 0px;"
			>

			<div style="padding: 14px;">
				<el-link :href="item.blog_sub_url"><h2>${ item.blog_title }</h2></el-link>
				  <div class="bottom card-header">
					<p class="post-summary text-ells" v-html="item.blog_content"></p>
					<p type="text">
					  <el-link>${author.name}</el-link>
					  <b>${item.create_time}</b>
					  <el-link icon="el-icon-view" title="查看人数"> ${item.blog_views} </el-link>
					  <el-link icon="el-icon-chat-line-round" title="评论人数"></el-link>
					  <el-link icon="el-icon-thumb" title="点赞人数">10</el-link>
					</p>
				  </div>
			</div>
		  </el-card>

		</template>
		  </el-skeleton>
		</template>
	  </el-col>
	</el-row>
	  </el-main>
	  <el-footer title="分页栏">
		<div class="block">
		  <!-- <span class="demonstration">完整功能</span> -->
		  <el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="page"
			:page-sizes="[3, 5, 8, 13]"
			:page-size="pagesize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total">
		  </el-pagination>
		</div>
	  </el-footer>
	</el-container>

	</el-container>

	<el-footer title="网站基本信息" >
	  <hr>
	  <div>
	    <el-descriptions title="网站基本信息" style="margin: 0px auto;width: 1024px;">
	      <el-descriptions-item label="用户名">梁超</el-descriptions-item>
	    </el-descriptions>
	  </div>

	</el-footer>




      </el-container>
    </div>

    <!-- <div id="editor"></div> -->




  </body>
  <!-- <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script> -->
  <!-- import Vue before Element -->
  <script src="/static/js/Vue.js"></script>
  <!-- import JavaScript -->
  <script src="/static/js/index.js"></script>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="/static/js/jquery-3.6.0.min.js"></script>
  <!--  markdown to html -->
  <script src="/static/js/marked.min.js"></script>

  <script>
		var Main = new Vue({
			el: "#app",
			data: {
				fit:'contain',
				input:'',
				select:'',
				categoryList: [],
				pagesize: 3,
				page: 1,
				loading: true,
				total:0,
				currentDate: '2021-06-01',
				blogs: [],
				author: {
					name: "Liang Chao",
				},
				loading: false,
				lists: [
					{
						imgUrl:
								'/static/images/halloween-wallpaper-with-evil-pumpkins.jpg',
						name: '鹿',
					},
					{
						imgUrl:
								'/static/images/girl-6738285_1280.webp',
						name: '马',
					},
					{
						imgUrl:
								'/static/images/DSC09828.jpg',
						name: '山狮',
					},
					{
						imgUrl:
								'/static/images/111.jpg',
						name: '111',
					},

				]

			},
			delimiters:['${', '}'],
			methods: {
				// flushList: 刷新列表
				flushList(page, pagesize){
					let blogs = []
					$.ajax({
						url: `/blogo/blog/list/${page}/${pagesize}`,
						type: "get",
						dataType: "json",
						async: false,
						success: function (res){
							blogs = res.data.blog_list

							for (var i = 0; i < blogs.length; i++) {
								blogs[i].blog_content = marked(blogs[i].blog_content)
							}
						}

					})
					this.blogs = blogs;
				},
				// getBlogTotal: 获取博客总条数
				getBlogTotal(){
					let total = 0;
					$.ajax({
						url: "/blogo/blog/total",
						type: "get",
						data: "",
						async: false,
						dataType: "json",
						success: function (res) {
							total = res.data.tb_total;
						}
					})
					this.total = total
				},
				getCategoryList() {
					let categoryList = []
					$.ajax({
						url: "/blogo/category/all",
						type: "get",
						async: false,
						dataType: "json",
						success: function (res){
							if(res != null && res.code === 200)
								categoryList = res.data.category_list
						}
					})
					this.categoryList = categoryList
				},
				setLoading() {
					this.loading = true
					setTimeout(() => (this.loading = false), 2000)
				},
				handleSizeChange(val) {
					this.pagesize = val
					this.page = 1
					this.queryBlogsByKeywords(this.input, this.select)

				},
				handleCurrentChange(val) {
					this.page = val
					this.queryBlogsByKeywords(this.input, this.select)
				},
				handleInputChange(val){
					this.queryBlogsByKeywords(val, this.select)
				},
				queryBlogsByKeywords(keywords, method){
					let blogList = []
					let total = 0
					this.input = keywords
					this.select = method === '' ? '1':method
					$.ajax({
						url: `/blogo/blog/query/${this.page}/${this.pagesize}?input=${this.input}&method=${this.select}`,
						type: "get",
						async: false,
						dataType: "json",
						success: function (res) {
							if(res != null && res.code === 200){
								blogList = res.data.blogs
								total = res.data.total
							}
						}
					})
					this.blogs = blogList
					this.total = total
				},
				handleCategoryClick(val){
					this.input = val
					this.select = '2'
					this.queryBlogsByKeywords(this.input, this.select)
				},

			},
			created: function (){
				this.flushList(this.page, this.pagesize)
				this.getBlogTotal()
				this.getCategoryList()
			},
		})
  </script>



  </html>
